<template>
  <div class="container-auth">
    <header id="auth-header" class="auth-header">
      <h1>
        <!-- <img src="../../assets/logo.png" alt height="88"> -->
        <div style="height:88px"></div>
        <span class="sr-only" style="padding-bottom:25px">与时订单管理系统</span>
      </h1>
      <p style="font-size:22px">
        与时数据分析系统
        <!-- <a href="auth-signup.html">注册..</a> -->
      </p>
      <canvas
        class="particles-js-canvas-el"
        width="889"
        height="261"
        style="width: 100%; height: 100%;"
      ></canvas>
    </header>
    <form class="auth-form" @submit.prevent="signIn" name="authForm">
      <div class="form-group">
        <div class="form-label-group">
          <input
            type="text"
            name="userName"
            v-model="userName"
            class="form-control placeholder-shown"
            placeholder="账号"
          >
          <!-- <label for="inputUser">Username</label> -->
        </div>
      </div>
      <div class="form-group">
        <div class="form-label-group">
          <input
            type="password"
            name="password"
            v-model="password"
            class="form-control placeholder-shown"
            placeholder="密码"
          >
          <!-- <label for="inputPassword">Password</label> -->
        </div>
      </div>
      <div class="form-group">
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
      </div>
      <!-- <div class="form-group text-center">
        <label class="custom-control custom-control-inline custom-checkbox">
          <input type="checkbox" class="custom-control-input" v-model="remember" id="remember-chk">
          <label class="custom-control-label" for="remember-chk">记住登录</label>
        </label>
      </div> -->
    </form>
    <div class="auth-footer">
      © 2019 与时版权所有.
      <!-- <a href="#">Privacy</a> and
      <a href="#">Terms</a> -->
    </div>
  </div>
</template>
<script>
// import particles from '../../assets/login/particles.json'
// import particlesjs from 'particles.js'
import { required } from "vuelidate/lib/validators";

export default {
  name: "Login",
  // components: { particlesjs },
  data() {
    return {
      userName: "jean",
      password: "123456",
      remember: false,
      errors: []
    };
  },
  methods: {
    signIn() {
      // console.log(authForm);
      //console.log('localStorage: ', localStorage);
      //return;

      this.$v.$touch();
      if (this.$v.$invalid) {
        alert("请输入用户名及密码");
      } else {
        const url = "/api/auth";
        const data = {
          user_name: this.userName,
          password: this.password
        };

        const router = this.$router;
        localStorage.clear();

        this.$user.login(data).then(result => {          
          var data = result.data;
          if (data.success) {
            var user = data.data;

            const token = data.data.access_token;
            this.$user.setToken(token);

            //Set cookies.
            localStorage.setItem('token', token);
            localStorage.setItem('user', JSON.stringify(user));

            var path = '/';
            var query = router.currentRoute.query;
            if(query && query.redirect)
              path = query.redirect;
            
            router.replace({path : path});
          } else {
            alert(data.data.message);
          }
        });
      }
    }
  },
  validations: {
    userName: {
      required
    },
    password: {
      required
    }
  },
  mounted() {
    // console.log(particles);
    // window.particlesJS.load('auth-header', particles);
    $('.auth-form input[name=userName]').focus();
  }
};
</script>
<style lang="scss" scoped>
$bgColor: #346cb0;

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container-auth {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  background-color: #f6f7f9;
  min-height: 100%;
}

.auth-header {
  display: block;
  position: relative;
  padding-top: 96px;
  padding-bottom: 48px;
  padding-left: 20px;
  padding-right: 20px;
  height: 260px;
  // padding: 2rem 1.25rem 0;
  width: 100%;
  background-color: $bgColor;
  color: #fff;
  text-align: center;
  background-size: cover;
  background-image: url(../../assets/images/img-1.png);
  background-position-y: -100;
}

.auth-header img {
  vertical-align: middle;
  border-style: none;
}

.auth-header canvas {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

canvas.particles-js-canvas-el {
  position: absolute;
  top: 0;
  left: 0;
}

.auth-form {
  position: relative;
  // padding: 2rem 1.25rem 0;
  padding-top: 48px;
  padding-bottom: 16px;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
  z-index: 1;
}

@media (min-width: 768px) {
  .auth-header {
    margin-bottom: -3rem;
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  .auth-form {
    // padding: 3rem 2rem 1rem;
    max-width: 420px;
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05),
      0 1px 3px 0 rgba(20, 20, 31, 0.15);
  }
}

.auth-form .form-control {
  padding: 12px;
  font-size: 16px;
}

.auth-footer {
  padding: 1rem;
  color: #888c9b;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

